<template>
  <div>
    <h3>欢迎光临_vue开发的收银系统_水果店</h3>
    <div>苹果10¥/斤,折扣8折</div>
    <span>请输入你要购买的斤数</span
    ><input type="text" v-model.number="price" /><br />
    <button @click="btn">结账买单~</button>
    <div>结账单:总价:{{ count }}¥元 折后价:{{ aa }}¥元 省了:{{ bb }}¥元</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      aa: 0,
      bb: 0,
      price: "",
    };
  },
  methods: {
    btn() {
      this.count = this.price * 10;
      this.aa = this.price * 10 * 0.8;
      this.bb = this.count - this.aa;
    },
  },
};
</script>

<style>
</style>
